<template>
  <div id="addReg" class="pd_20 bg_white">
    <el-form :model="info" :rules="rules" ref="info" label-width="90px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="姓名：" prop="name">
            <el-input v-model="info.name" placeholder="请输入或选择患者姓名"></el-input>
          </el-form-item>
          <el-form-item label="电话：" prop="phone">
            <el-input v-model="info.phone" placeholder="请输入患者联系电话，多个请用逗号隔开"></el-input>
          </el-form-item>
          <el-form-item label="出生日期：">
            <el-date-picker class="el_long" v-model="info.name" type="date" placeholder="选择日期"></el-date-picker>
          </el-form-item>
          <el-form-item label="文化：">
            <el-select v-model="info.name" placeholder="请选择患者文化程度" class="el_long">
              <el-option label="请选择患者文化程度" :value="1"></el-option>
              <el-option label="为受教育" :value="1"></el-option>
              <el-option label="小学" :value="2"></el-option>
              <el-option label="初中" :value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="性别：" prop="sex">
            <el-radio-group v-model="info.sex">
              <el-radio :label="'男'">男</el-radio>
              <el-radio :label="'女'">女</el-radio>
              <el-radio :label="'不详'">不详</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="身份证号：">
            <el-input v-model="info.name" placeholder="输入患者身份证号"></el-input>
          </el-form-item>
          <el-form-item label="婚姻：">
            <el-select v-model="info.name" placeholder="选择婚姻状况" class="el_long">
              <el-option label="选择婚姻状况" :value="1"></el-option>
              <el-option label="未婚" :value="1"></el-option>
              <el-option label="已婚" :value="2"></el-option>
              <el-option label="丧偶" :value="3"></el-option>
              <el-option label="离异" :value="4"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="职业：">
            <el-select v-model="info.name" placeholder="请选择患者职业" class="el_long">
              <el-option label="请选择患者职业" :value="1"></el-option>
              <el-option label="未婚" :value="1"></el-option>
              <el-option label="已婚" :value="2"></el-option>
              <el-option label="丧偶" :value="3"></el-option>
              <el-option label="离异" :value="4"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="地址：">
        <el-row>
          <el-col :span="5">
            <el-select v-model="info.name" placeholder="选择省" class="el_90">
              <el-option label="选择省" :value="1"></el-option>
            </el-select>
          </el-col>
          <el-col :span="5">
            <el-select v-model="info.name" placeholder="选择市" class="el_90">
              <el-option label="选择省" :value="1"></el-option>
            </el-select>
          </el-col>
          <el-col :span="5">
            <el-select v-model="info.name" placeholder="选择区" class="el_90">
              <el-option label="选择省" :value="1"></el-option>
            </el-select>
          </el-col>
          <el-col :span="9">
            <el-input type="text" placeholder="请输入详细地址信息"></el-input>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="备注：">
        <el-input type="textarea" :rows="4" placeholder="输入备注信息"></el-input>
      </el-form-item>
    </el-form>
    <el-row class="footer-fixed">
      <el-col :span="24" class="text-right">
        <el-button type="primary" plain>取消</el-button>
        <el-button type="primary" @click="submitInfo('info')">完成登记</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "addReg",
  data() {
    return {
      info: {
        name: "",
        phone: "",
        sex: ""
      },
      rules: {
        name: [{ required: true, message: "姓名不能为空", trigger: "blur" }],
        sex: [{ required: true, message: "性别不能为空", trigger: "change" }],
        phone: [{ required: true, message: "电话不能为空", trigger: "blur" }]
      }
    };
  },
  methods: {
    submitInfo(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("验证通过！");
        } else {
          return false;
        }
      });
    }
  }
};
</script>

<style scoped>
#addReg {
  height: 100%;
  padding-bottom: 80px;
  overflow-y: auto;
}
</style>
